<script lang="ts">
  import { fade } from 'svelte/transition';
  export let text: string = '';
</script>

<div class="message" transition:fade>
  <div class="img">
    <svg
      viewBox="0 0 48 48"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      stroke="currentColor"
      stroke-width="4"
      class="arco-icon arco-icon-info-circle-fill"
      stroke-linecap="butt"
      stroke-linejoin="miter"
      ><path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Zm2-30a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2Zm0 17h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-8a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11Z"
        fill="currentColor"
        stroke="none"
        stroke-width="none"
      ></path></svg
    >
  </div>
  <span>{text || ''}</span>
</div>

<style lang="less">
  .message {
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    border: 1px solid #ececf7;
    border-radius: 4px;
    box-shadow: 0 4px 10px #0000001a;
    z-index: 9999;
    padding: 10px 16px;
    .img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
      color: rgb(27, 99, 217);
      svg {
        width: 20px;
        height: 20px;
      }
    }
    span {
      color: rgb(29, 33, 41);
      line-height: 22px;
      vertical-align: middle;
    }
  }
</style>
